<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>与智能体通话</title>
    <link rel="stylesheet" href="../static/css/phone.css">
    <link rel="icon" href="../static/favicon.ico" />
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/socket.io/4.4.1/socket.io.min.js"></script>
    <!-- 引入fa字体图标和音频可视化库 -->
    <script src="https://kit.fontawesome.com/11023f265d.js" crossorigin="anonymous"></script>
    <script src="../static/js/vudio.js" async></script>
</head>

<body>
    <div aria-label="返回主页"><i class="fa-solid fa-chevron-left goBack"></i></div>
    <div aria-label="切换摄像头" style="display: none;" class="toggleCamera"><i class="fa-solid fa-repeat toggleCamera"></i>
    </div>
    <video autoplay style="display: none;" aria-label="视频通话窗口">您的浏览器不支持视频通话</video>
    <!-- <canvas class="frame-window"></canvas> -->
    <div id="captionModal" class="captionModal" aria-label="字幕模态窗口">
        <p id="captionText"></p>
    </div>
    <div id="container">
        <img src="../static/images/bot.jpg" alt="智能体头像" aria-label="智能体头像">
    </div>

    <!-- 控件部分 -->
    <div id="controller">
        <div id="status">正在听</div>
        <canvas id="waveShape" aria-label="音频波形图"></canvas>
        <audio autoplay id="audio" aria-label="通话音频"></audio>
        <div aria-label="打开摄像头"><i class="fa-solid fa-video openCamera"></i></div>
        <div aria-label="挂断电话"><i class="fa-solid fa-phone-slash hangUp"></i></div>
        <div aria-label="结束功能"><i class="fa-solid fa-times endFunc"></i></div>
        <div aria-label="打断说话"><i class="fa-solid fa-stop shutUpSpeak"></i></div>
        <div aria-label="麦克风按钮" id="micButton"><i class="fa-solid fa-microphone"></i></div>
        <div aria-label="字幕按钮" id="captionButton"><i class="fa-solid fa-font"></i></div>
    </div>

    <!-- 选项栏 -->
    <div id="optionsBar">
        <button class="optionButton avoidObstacle" aria-label="辅助避障">避障</button>
        <button class="optionButton findItem" aria-label="帮我寻物">寻物</button>
        <button class="optionButton currentLocation" aria-label="当前位置">位置</button>
        <button class="optionButton environmentDescription" aria-label="环境描述">环境</button>
    </div>

    <!-- 小窗部分 -->
    <div id="findItemModal">
        <div id="overflowArea" aria-label="请选择你要寻找的物品，来自：我的-寻物画廊">
            <div id="gallery"></div>
        </div>
        <div class="find-item-tip">请选择你要寻找的物品，来自：我的-寻物画廊</div>
        <div class="no-item-tip">空空如也，<br>请先在“我的”-“寻物画廊”中添加需要寻找的物品~</div>
        <button id="closeModalButton">关闭</button>
    </div>

    <div id="microphone" class="voice"></div>
    <audio id="audioPlayer" controls autoplay style="display: none"></audio>

    <!-- 覆盖层元素，实现模态窗口弹出时无法点击其他按钮 -->
    <div id="overlay"></div>

    <script src="../static/js/auth.js"></script>
    <script src="../static/js/chat.js"></script>
    <script src="../static/js/lib/recorder.js"></script>
    <script type="module" src="../static/js/lib/audioUtils.js"></script>
    <script type="module" src="../static/js/phone.js"></script>
    <script src="../static/js/yoloDetector.js"></script>
    <script>
        function startFindItem(item_name) {
            // 这里可以是一个空函数，具体实现已经在phone.js中
        }
    </script>
</body>

</html>